<!-- 购物车业 Cart.vue -->
<template>
  <div class="cart">
    <div v-if="allGoods.length">
      <div v-for="(item, index) in allGoods" :key="index">
        <div class="goods-item">
          <div class="left">
            <img :src="item.img" />
          </div>
          <div class="right">
            <div class="title">商品名称：{{ item.name }}</div>
            <div class="price">商品价格：{{ item.price }}</div>
          </div>
          <div class="action">
            <div class="add">
              <van-button icon="plus" size="mini" type="primary" @click="add(item)" />
            </div>
            <div class="del">
              <van-button icon="minus" size="mini" type="primary" @click="minus(item)" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty description="购物车里暂时没有商品啦，快去添加吧！" />
    </div>
    <van-action-bar>
      <van-action-bar-icon
        icon="cart-o"
        text="总数"
        :badge="totalCount"
        @click="onClickCount(totalCount)"
      />
      <van-action-bar-icon
        icon="shop-o"
        text="总价"
        :badge="totalPrice"
        @click="onClickPrice(totalPrice)"
      />
      <van-action-bar-button type="danger" text="立即购买" @click="onBuying" />
    </van-action-bar>
  </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      goods: '',
      allGoods: JSON.parse(localStorage.getItem('allGoods')) || [],
      totalCount: 0,
      totalPrice: 0
    })
    let route = useRoute()
    let goods = route.query

    if (goods.name) {
      state.goods = goods
      state.allGoods.push(state.goods)
      localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
    }

    const computeTotal = () => {
      state.totalCount = state.allGoods.length
      state.allGoods.forEach((item) => {
        state.totalPrice += item.price ? parseInt(item.price) : 0
      })
    }
    computeTotal()
    const onClickCount = (count) => {
      proxy.$toast(`您一共选择了${count}件商品`)
    }
    const onClickPrice = (price) => {
      proxy.$toast(`您应支付${price}元`)
    }
    const onBuying = () => {
      // 清空购物车
      proxy.$toast.success('购买成功')
      localStorage.removeItem('allGoods')
      state.totalCount = 0
      state.totalPrice = 0
      state.allGoods = []
    }

    const add = (good) => {
      state.allGoods.push(good)
      localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
      computeTotal()
    }

    const minus = (good) => {
      const index = state.allGoods.indexOf(good)
      state.allGoods.splice(index, 1)
      localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
      computeTotal()
    }

    return {
      goods,
      ...toRefs(state),
      onClickCount,
      onClickPrice,
      onBuying,
      add,
      minus
    }
  }
}
</script>

<style scoped>
.cart {
  padding-bottom: 6.25rem;
}
.goods-item {
  display: flex;
  padding: 10px;
  border: 1px solid #eee;
}
.left {
  flex: 1;
  height: 6.25rem;
}
.left img {
  width: 100%;
  height: 100%;
}
.right {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.right .title,
.right .price {
  margin-left: 1.25rem;
  margin-bottom: 1.25rem;
}
.action {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.van-action-bar {
  bottom: 50px;
  justify-content: space-around;
}
.van-action-bar-button--last {
  max-width: 200px !important;
}
</style>
